import React, { useState, useCallback } from 'react';
import { Card, Button } from 'antd';
import StatefulCalculationCard from '../../../../../../components/common/StatefulCalculationCard';
import NumberField from '../../../../../../components/common/NumberField';
import RectangularTrussLoadCalculation from '../RectangularLoadCalculation';
import RectangularTrussExternalLoadCalculation from '../RectangularExternalLoadCalculation';

// 矩形桁架结构计算表单类型定义
interface RectangularTrussStructureFormValues {
  // 桁架参数
  length: number;
  height: number;
  width: number;
  load: number;
}

// 矩形桁架结构计算结果类型定义
interface RectangularTrussStructureResult {
  reaction: number;
  topChordForce: number;
  topChordMoment: number;
  bottomChordForce: number;
  bottomChordMoment: number;
  deflection: number;
}

// 矩形桁架结构计算初始值配置
const structureInitialValues: RectangularTrussStructureFormValues = {
  // 桁架参数
  length: 14.0,
  height: 1.0,
  width: 0.8,
  load: 4900,
};

// 结构计算配置
const structureConfig = {
  key: 'rectangular-truss-structure',
  label: '矩形桁架结构计算',
  formKey: 'rectangular-truss-structure',
  initialValues: structureInitialValues,
  calculationType: 'crossing-rectangular-truss-calculation',
  resultFormatter: (data: RectangularTrussStructureResult) => [
    { key: 'reaction', name: '支座反力', value: data.reaction, unit: 'N' },
    { key: 'topChordForce', name: '上弦杆轴力', value: data.topChordForce, unit: 'N (压力)' },
    { key: 'topChordMoment', name: '上弦杆弯矩', value: data.topChordMoment, unit: 'N·m' },
    { key: 'bottomChordForce', name: '下弦杆轴力', value: data.bottomChordForce, unit: 'N (拉力)' },
    { key: 'bottomChordMoment', name: '下弦杆弯矩', value: data.bottomChordMoment, unit: 'N·m' },
    { key: 'deflection', name: '桁架跨中挠度', value: data.deflection, unit: 'm' },
  ],
  renderFormFields: () => (
    <>
      <NumberField name="length" label="桁架长度 (m)" required min={0} step={0.1} />
      <NumberField name="height" label="桁架高度 (m)" required min={0} step={0.1} />
      <NumberField name="width" label="桁架宽度 (m)" required min={0} step={0.1} />
      <NumberField name="load" label="荷载 (N)" required min={0} step={1} />
    </>
  )
};

// 创建结构计算卡片
const RectangularTrussStructureCard: React.FC = () => (
  <StatefulCalculationCard
    title={structureConfig.label}
    formKey={structureConfig.formKey}
    initialValues={structureConfig.initialValues}
    renderFormFields={structureConfig.renderFormFields}
    calculationType={structureConfig.calculationType}
    resultFormatter={structureConfig.resultFormatter}
    columnCount={2}
    tableHeight={300}
  />
);

// 包含结构计算卡片的组件
const RectangularTrussMultiCard: React.FC = () => {
  const [selfWeightModalVisible, setSelfWeightModalVisible] = useState(false);
  const [externalLoadModalVisible, setExternalLoadModalVisible] = useState(false);

  const handleSelfWeightModalClose = useCallback(() => {
    setSelfWeightModalVisible(false);
  }, []);

  const handleExternalLoadModalClose = useCallback(() => {
    setExternalLoadModalVisible(false);
  }, []);

  return (
    <Card title="矩形桁架计算">
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <div>
          <RectangularTrussStructureCard />
        </div>
        
        <div style={{ 
          marginTop: '24px',
          display: 'flex',
          justifyContent: 'center',
          gap: '16px'
        }}>
          <Button type="primary" onClick={() => setSelfWeightModalVisible(true)}>
            自重荷载计算
          </Button>
          <Button type="primary" onClick={() => setExternalLoadModalVisible(true)}>
            外部荷载计算
          </Button>
        </div>
      </div>
      
      {/* 自重荷载模态框 */}
      <RectangularTrussLoadCalculation 
        visible={selfWeightModalVisible}
        onCancel={handleSelfWeightModalClose}
      />
      
      {/* 外部荷载模态框 */}
      <RectangularTrussExternalLoadCalculation
        visible={externalLoadModalVisible}
        onCancel={handleExternalLoadModalClose}
      />
    </Card>
  );
};

export default RectangularTrussMultiCard;
